import React from "react";
import { Radio, Tabs } from "antd";
const RadioGroup = Radio.Group;
import { fromJS } from "immutable";
declare let window: any;
const { msg } = window.xDllContext;
export default class HomePage extends React.Component<any, any> {
  constructor(props) {
    super(props);
    this.state = {
      value: true,
      MAX_SIZE: 6
    };
  }
  static defaultProps = {};
  componentDidMount() {
    this.setState({ value: this.props.home.getIn(["qrCode"]) });
  }
  render() {
    const { home } = this.props;
    const { MAX_SIZE } = this.state;
    const dataItem = home.get("homeImage").map((item, index) => {
      return (
        <div className="imageData">
          <img src={item.get("imgSrc")} onClick={this._chooseImageDialog.bind(this, index)} />
          {home.get("homeImage").count() === 1 ? null : (
            <div onClick={this._del.bind(this, index)} className="del ui-edit-link">
              <a href="javascript:void(0);" className="x-site-new-qIcon del" />
            </div>
          )}
        </div>
      );
    });
    return (
      <div className="home-page-edit">
        <p>
          <span>最多 6 张 1080*1920px 的图片</span>
        </p>
        {dataItem}
        {home.getIn(["homeImage"]).count() < MAX_SIZE ? (
          <div className="imageData" onClick={this._add}>
            <span style={{ fontSize: "50px" }}>+</span>
          </div>
        ) : null}
      </div>
    );
  }
  // 选择图片
  _chooseImageDialog = (index, event) => {
    const { commonUtil } = window.xSiteIntegrate;
    const currentImagePath = ["props", "homePage", "homeImage", index, "imgSrc"];
    msg.emit("edit:chooseImage", {
      __data_info: this.props.__info ? this.props.__info.get(currentImagePath.join(",")) : null,
      changeVal: chooseImageInfo => {
        const imageSrc = chooseImageInfo.info.src;
        this._changeVal(currentImagePath, imageSrc, chooseImageInfo);
      }
    });
  };
  _del = index => {
    console.log(index);
    const list = this.props.home.getIn(["homeImage"]);
    this._changeVal(["props", "homePage", "homeImage"], list.delete(index), null);
  };

  _add = () => {
    // const list = this.props.home.getIn(['homeImage']);
    msg.emit("edit:chooseImage", {
      changeVal: chooseImageInfo => {
        const imageSrc = chooseImageInfo.info.src;
        let newItems = this.props.home.getIn(["homeImage"]);
        newItems = newItems.push(
          fromJS({
            imgSrc: imageSrc,
            imgHref: ""
          })
        );
        this._changeVal(["props", "homePage", "homeImage"], newItems, null);
      }
    });
  };

  _changeVal = (pathArray, newVal, platFormValueMap) => {
    this.props.onDataChange(pathArray, newVal, platFormValueMap);
  };
}
